<template>
  <a-layout-header :style="headerStyle">
    <a-affix :offset-top="top">
      <div class="top_navgation">
        <!-- 顶部导航栏 -->
        <div class="search">
          <a-row class="top_search">
            <a-col :span="12">
              <ul style="display: flex">
                <li style="font-size: 11px; font-weight: 200">
                  <router-link to="/"
                    ><HomeOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />首页</router-link
                  >
                </li>
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link to="/register"
                    ><SendOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />免费注册</router-link
                  >
                </li>
              </ul>
            </a-col>
            <a-col :span="12">
              <ul style="display: flex">
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link @click="toCart" to="/cart"
                    ><ShoppingCartOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />购物车</router-link
                  >
                </li>
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <a-dropdown>
                    <router-link to="/collectgoods"
                      ><StarOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />收藏夹 <DownOutlined style="color: coral" />
                    </router-link>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <router-link
                            style="font-size: 10px"
                            to="/collectgoods"
                            >收藏的宝贝</router-link
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <router-link
                            style="font-size: 10px"
                            to="/collectstores"
                            >收藏的店铺</router-link
                          >
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </li>
                <li
                  @click="toPersonal"
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link to="/personal"
                    ><DesktopOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />个人中心</router-link
                  >
                </li>
              </ul>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-affix>
  </a-layout-header>
  <a-layout-content>
    <a-spin :spinning="spinning" size="large">
      <div>
        <div class="top_content">
          <div class="content">
            <a-card>
              <div class="card_store">
                <div style="padding: 20px 0px 20px 0px">
                  <div>
                    <a-avatar :size="100" :src="storeInfo.image" />
                    <span
                      style="
                        margin-left: 20px;
                        font-size: 22px;
                        font-weight: 700;
                      "
                      >{{ storeInfo.homeName }}</span
                    >
                  </div>
                  <div style="margin-top: 20px; display: flex">
                    <div>
                      <h4>
                        开店时间：<span style="color: #000; font-size: 16px">{{
                          storeInfo.createTime
                        }}</span>
                      </h4>
                      <h4>
                        运营天数：<span style="color: #000; font-size: 16px"
                          >{{ storeInfo.longTime }} 天</span
                        >
                      </h4>
                      <h4
                        style="
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                      >
                        所 在 地：<span style="color: #000; font-size: 16px">{{
                          storeInfo.address
                        }}</span>
                      </h4>
                    </div>
                    <a-divider
                      type="vertical"
                      style="
                        height: 100px;
                        background-color: #c0c4cc;
                        margin: 16px 60px 0px 60px;
                      "
                    />
                    <div>
                      <h4>
                        店铺收藏：
                        <a-badge
                          :count="storeInfo.collectNum"
                          :number-style="{ backgroundColor: '#f56c6c' }"
                        />
                      </h4>
                      <h4>
                        店铺评价：
                        <a-badge
                          :count="storeInfo.comment"
                          :number-style="{ backgroundColor: '#e6a23c' }"
                        />
                      </h4>
                      <h4>
                        店铺评分：<span
                          style="
                            color: #bd2069;
                            font-size: 16px;
                            margin-left: 7px;
                          "
                        >
                          <a-rate
                            disabled
                            v-model:value="storeInfo.score"
                            allow-half
                          />
                        </span>
                      </h4>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </div>
        </div>
      </div>
      <!-- 商品数据内容 -->
      <div class="top_content">
        <div class="content">
          <a-card :bordered="false" style="height: auto; margin-top: 20px">
            <a-row>
              <a-col :span="19" style="height: auto">
                <div style="height: 60px">
                  <h2>所有宝贝</h2>
                  <hr class="hr-first" />
                </div>
                <a-empty v-if="isData">
                  <template #description>
                    <span> 暂无商品 </span>
                  </template>
                </a-empty>
                <div
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                  "
                >
                  <router-link
                    to=""
                    v-for="(item, index) in storeData"
                    :key="index"
                  >
                    <div class="card_box">
                      <router-link to="" @click="toGoodsDetail(item.id)">
                        <div>
                          <img
                            style="
                              border-radius: 10px;
                              width: 220px;
                              height: 220px;
                              object-fit: cover;
                            "
                            :src="item.image"
                            alt=""
                          />
                        </div>
                        <div style="margin-top: 10px; padding-left: 5px">
                          <h3>
                            {{ item.name }}
                          </h3>
                        </div>
                        <div>
                          <PayCircleOutlined :style="icon_pay_style" />
                          <span
                            style="
                              font-size: 20px;
                              color: #ff5000;
                              font-weight: bold;
                            "
                            >{{ towNumber(item.price) }}
                          </span>
                          <span
                            style="
                              margin-left: 10px;
                              font-size: 13px;
                              color: #606266;
                            "
                            >{{ item.sale }}人付款</span
                          >
                        </div>
                      </router-link>
                    </div>
                  </router-link>
                </div>
                <!-- 分页 -->
                <div
                  style="
                    height: 40px;
                    width: 100%;
                    margin-top: 30px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <a-pagination
                    v-model:current="pageNo"
                    v-model:page-size="pageSize"
                    :total="total"
                    @change="handlePageChange"
                  />
                </div>
                <!-- 底部宝贝详情 -->
                <div style="margin-top: 50px; margin-left: 20px">
                  <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane key="1" tab="店铺评价" force-render>
                      <a-comment
                        v-for="(item, index) in commentDto"
                        :key="index"
                      >
                        <template #author
                          ><span style="font-size: 16px; color: #000">{{
                            item.nickName
                          }}</span></template
                        >
                        <template #avatar>
                          <a-avatar :src="item.avatar" alt="Han Solo" />
                        </template>
                        <template #content>
                          <p style="color: #606266">{{ item.comment }}</p>
                        </template>
                        <template #datetime>
                          <a-tooltip>
                            <span style="color: #aaa">{{
                              item.createTime
                            }}</span>
                          </a-tooltip>
                        </template>
                      </a-comment>
                      <a-empty v-if="isEmpty" description="暂无评价" />
                    </a-tab-pane>
                  </a-tabs>
                </div>
              </a-col>
              <a-col :span="5" style="height: 90vh">
                <div class="line"></div>
                <h2 style="margin-left: 30px">店铺推荐</h2>
                <hr class="hr-solid" />
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                  "
                >
                  <router-link
                    to=""
                    v-for="(item, index) in recommendGoodsData"
                    :key="index"
                  >
                    <div class="card_box">
                      <router-link to="" @click="toGoodsDetail(item.id)">
                        <div>
                          <img
                            style="
                              border-radius: 10px;
                              width: 220px;
                              height: 220px;
                              object-fit: cover;
                            "
                            :src="item.image"
                            alt=""
                          />
                        </div>
                        <div style="margin-top: 10px; padding-left: 5px">
                          <h3>
                            {{ item.name }}
                          </h3>
                        </div>
                        <div>
                          <PayCircleOutlined :style="icon_pay_style" />
                          <span
                            style="
                              font-size: 20px;
                              color: #ff5000;
                              font-weight: bold;
                            "
                            >{{ item.price }}
                          </span>
                          <span
                            style="
                              margin-left: 10px;
                              font-size: 13px;
                              color: #606266;
                            "
                            >{{ item.sale }}人付款</span
                          >
                        </div>
                      </router-link>
                    </div>
                  </router-link>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </div>
    </a-spin>
    <!-- 右侧的悬浮按钮 -->
    <div>
      <a-float-button-group
        trigger="hover"
        type="primary"
        :style="{ right: '100px' }"
      >
        <template #icon>
          <CustomerServiceOutlined />
        </template>
        <a-float-button @click="doCollect" tooltip="点击收藏">
          <template #icon>
            <HeartOutlined />
          </template>
        </a-float-button>
        <a-float-button @click="doneComment" tooltip="点击评价">
          <template #icon>
            <CommentOutlined />
          </template>
        </a-float-button>
      </a-float-button-group>
    </div>

    <!-- 评价弹框 -->
    <div>
      <a-modal
        v-model:open="modalVisible"
        title="店铺评价"
        centered
        cancelText="取消"
        okText="确认"
        @ok="saveComment"
        @cancel="handleCancel"
      >
        <a-form ref="formRef" :model="comments" :rules="rules">
          <a-form-item label="内容" ref="comment" name="comment">
            <a-textarea v-model:value="comments.comment" :rows="4" />
          </a-form-item>
          <a-form-item label="评分" ref="score" name="score">
            <a-rate v-model:value="comments.score" allow-half />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </a-layout-content>
</template>
<script setup>
import {
  StarOutlined,
  ShoppingCartOutlined,
  DownOutlined,
  DesktopOutlined,
  SendOutlined,
  HomeOutlined,
  PayCircleOutlined,
  CustomerServiceOutlined,
  HeartOutlined,
  CommentOutlined,
} from "@ant-design/icons-vue";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getStores, searchGoods } from "@/api/store";
import router from "@/router";
import { useAuthorizationStore } from "@/stores/authorization";
import { useUserStore } from "@/stores/user";
import { message } from "ant-design-vue";
import { saveComments, getComment } from "@/api/storecomment";
import { saveCollectStore } from "@/api/collectstores";

const activeKey = ref("1");
const authorizationStore = useAuthorizationStore();
const userStore = useUserStore();
const pageNo = ref(1);
const pageSize = ref(30);
const total = ref(0);
const spinning = ref(true);
const route = useRoute();
const storeId = ref(null);
storeId.value = route.query.id;

const storeData = ref([]);
const storeInfo = ref({});
onMounted(() => {
  setTimeout(() => {
    //获取店铺信息和商铺数据
    getStoreInfos();
    searchRecommendGoods();
    getComments();
    spinning.value = false;
  }, 1500);
});

//获取店铺信息和商铺数据
function getStoreInfos() {
  getStores(pageNo.value, pageSize.value, storeId.value).then((res) => {
    if (res.code === 200) {
      storeData.value = res.data.data;
      storeInfo.value = res.data.info;
      total.value = res.data.total;
    }
  });
}

//获取店铺评价
const commentDto = ref([]);
const isEmpty = ref(false);
function getComments() {
  getComment(storeId.value).then((res) => {
    if (res.code === 200 && res.data !== null) {
      commentDto.value = res.data;
    }
    if (res.data === null) {
      isEmpty.value = true;
    }
  });
}

//获取店铺推荐商品
const recommendGoodsData = ref([]);
function searchRecommendGoods() {
  searchGoods(storeId.value).then((res) => {
    if (res.code === 200) {
      recommendGoodsData.value = res.data;
    }
  });
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNo.value = param1;
  pageSize.value = param2;
  getStoreInfos();
}

//跳往商品详情页
function toGoodsDetail(id) {
  router.push({ name: "Detail", query: { id: id } });
}

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}

//样式绑定
const headerStyle = {
  color: "#fff",
  height: "30px",
  paddingInline: "0px",
  lineHeight: "18px",
  backgroundColor: "#f4f4f5",
};

//评价
const modalVisible = ref(false);
const comments = ref({
  comment: "",
  score: null,
  userId: null,
  storeId: null,
});
function doneComment() {
  if (authorizationStore.authorization) {
    modalVisible.value = true;
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}

//评价保存
function saveComment() {
  formRef.value
    .validate()
    .then(() => {
      comments.value.userId = userStore.user.key;
      comments.value.storeId = storeInfo.value.id;
      saveComments(comments.value).then((res) => {
        if (res.code === 200) {
          message.success("评价成功！");
          modalVisible.value = false;
          comments.value = {};
          getComments();
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
}

const formRef = ref();
const rules = {
  comment: [
    {
      required: true,
      message: "请输入评价内容",
      trigger: "change",
    },
  ],
  score: [
    {
      required: true,
      message: "请进行评分",
      trigger: "change",
    },
  ],
};

//取消评价
function handleCancel() {
  modalVisible.value = false;
  comments.value = {};
}

//收藏
const collecGoods = ref({
  userId: null,
  storeId: null,
});
function doCollect() {
  if (userStore.user.key) {
    collecGoods.value.userId = userStore.user.key;
    collecGoods.value.storeId = storeInfo.value.id;
    saveCollectStore(collecGoods.value).then((res) => {
      if (res.code === 200) {
        message.success("收藏成功！");
      }
    });
  } else {
    message.warning("请先登录哦！");
    router.push("/login");
  }
}

const icon_pay_style = {
  fontSize: "20px",
  color: "#ff5000",
  marginRight: "5px",
};
</script>
<style scoped>
a:hover {
  color: red;
}
.top_navgation {
  background-color: #fff;
  color: #303133;
}
.search {
  height: 30px;
  background-color: #f4f4f5;
}
.top_search {
  height: 30px;
  margin-left: 150px;
  margin-right: 150px;
  width: 80%;
  padding-top: 3px;
}
.top_serach {
  height: 100px;
  background-color: #fff;
  display: flex;
  margin-left: 141.5px;
  margin-right: 141.5px;
}

ul {
  list-style-type: none;
}

:deep(.slick-slide) {
  height: 310px;
  background: #364d79;
  overflow: hidden;
  border-radius: 10px;
}

.input_search {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  width: 100%;
}

/* .ant-input ant-input-lg css-dev-only-do-not-override-b92jn9 */
:deep(.ant-input) {
  height: 50px;
  margin-top: 10px;
  border-style: solid;
  border-width: 2.5px;
}

.search_button {
  border-color: coral;
  border-style: solid;
  border-width: 2.5px;
  height: 50px;
  margin-top: 10px;
  background-color: coral;
}

.top_content {
  height: auto;
  background-color: #ebeef5;
}
.content {
  padding-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
:deep(.ant-divider-horizontal) {
  margin: 0px;
}

.hr-solid {
  border: 0;
  border-top: 2px solid #ebeef5;
  margin-left: 30px;
  margin-bottom: 15px;
}
.hr-first {
  border: 0;
  border-top: 2px solid #ebeef5;
  margin-right: 30px;
}
.line {
  background: #ebeef5; /*背景色为浅灰色*/
  width: 2px; /*设置宽高*/
  height: 90vh;
  float: left; /*让此div与前面的并排显示*/
}

h2 {
  color: #303133;
  font-weight: bold;
  margin-left: 10px;
}

.card_box {
  border-radius: 5px;
  width: 220px;
  height: 325px;
  margin-right: 10px;
  margin-bottom: 25px;
  margin-left: 5px;
  opacity: 0.8;
  transition: all 0.3s;
  background-color: #fff;
}

.card_box:hover {
  box-shadow: 6px 6px 6px #c0c4cc, 6px 6px 6px #c0c4cc;
}

/* 卡片css控制 */
:deep(.ant-card-body) {
  padding: 0;
}

h3 {
  white-space: wrap; /*超出的空白区域不换行*/
  font-weight: bold;
  color: black;
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
  -webkit-line-clamp: 2; /*在第几行显示...*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* [data-v-0e203336] .ant-input */

:deep(.ant-btn) {
  height: 43px;
  border-radius: 50px;
}
/* :where(.css-dev-only-do-not-override-b92jn9).ant-btn-primary */
:deep(.ant-btn-primary) {
  background-color: #ebeef5;
  color: black;
}

h4 {
  font-size: 14px;
  color: #3e3d3d;
  margin-top: 15px;
}

.card_store {
  display: flex;
  justify-content: center;
  background-image: url("https://pic.imgdb.cn/item/6594089f871b83018aeff350.jpg");
  border-radius: 10px;
}
</style>